{include file="public/header"/}

<style>
      .layui-form-label{
        float: left;
        display: block;
        padding: 9px 15px;
        width: 100px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }

       .videos {
            font-size: 0;
            height: 100%;
            pointer-events: none;
            position: absolute;
            transition: all 1s;
            width: 100%;
        }

        #localVideo {
            height: 100%;
            max-height: 100%;
            max-width: 100%;
            /*object-fit: cover;*/
            transition: opacity 1s;
            width: 100%;
        }

        #remoteVideo {
            display: block;
            height: 100%;
            max-height: 100%;
            max-width: 100%;
            /*object-fit: cover;*/
            position: absolute;
            transition: opacity 1s;
            width: 100%;
        }
</style>

<div id="container">
    <div class="all_content" style="overflow-y: hidden;">
        <section class="" style="width:20%;height:100%;position:absolute;left:0px;background: #f3f3f4;border-right: 1px solid #ddd;">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"
                 style="margin:0px;position: absolute;top:0px;width: 100%;">
                <ul class="layui-tab-title">
                    <li class="layui-this" style="width: 50%;">当前对话</li>
                    <li style="width: 50%;">排队列表 <div id="waitnum" class="notice-icon hide" style="position: absolute;top:0px;line-height: 18px;font-size: 8px;" ></div></li>
                </ul>
                <div class="layui-tab-content" style="padding: 0px;">
                    <div class="layui-tab-item  layui-show" id="chat_list" style="width: 100%;overflow-y: auto;">
                    </div>
                    <div class="layui-tab-item" id="wait_list" style="width: 100%;overflow-y: auto;">
                    </div>
                </div>
            </div>
        </section>


        <section style="width:50%;height:100%;position: absolute;left: 20%;background: #FFF;border-right: 1px solid #ddd;">
            <div class="no_chats">
                <i class="no_chats-pic"></i>
            </div>
            <div class="chatbox hide" style="width: 100%;height: 100%">

                <div id="wrap" style="width: 100%;height:62%;overflow-y: auto;">
                    <ul class="conversation">

                    </ul>
                </div>
                <script type="text/javascript">

                    window.onresize = function(){
                        var height =document.body.clientHeight;
                        $("#chat_list").css("height",(height -110)+"px");
                        $("#wait_list").css("height",(height-110)+"px");
                    }

                    document.getElementById("wrap").onscroll = function(){
                        var t =  document.getElementById("wrap").scrollTop;
                        if( t == 0 ) {
                            var sdata = $.cookie("cu_com");
                            if (!sdata) {
                                return;
                            }
                            var jsondata = $.parseJSON(sdata);
                            var chas = jsondata.visiter_id;
                            if($.cookie("hid") != ""){
                                getdata(chas);
                            }
                        }
                    }


                    function info(){
                        layer.tips("将您剪切好的图片粘贴到输入框即可", "#paste", {tips: [1, '#9EC6EA']});
                    }

                </script>
                <div class="footer">
                    <div class="msg-toolbar" style="background: #fff;border: none;">
                        <a id="face_icon" onclick="faceon()"><i class="am-icon-md am-icon-smile-o"></i></a>
                        <a >
                            <form id="picture" enctype="multipart/form-data">
                                <div class="am-form-group am-form-file">
                                    <i class="am-icon-md am-icon-photo"></i>
                                    <input type="file" name="upload" accept="image/*" onchange="put()"/>
                                </div>
                            </form>
                        </a>
                        <a >
                            <form id="file" enctype="multipart/form-data">
                                <div class="am-form-group am-form-file">
                                    <i class="am-icon-md am-icon-folder-o"></i>
                                    <input type="file" name="folder" onchange="putfile()"/>
                                </div>
                            </form>
                        </a>

                        <a onclick="getvideo()"><i class="am-icon-md am-icon-video-camera"></i></a>

                        {if $atype == 'open'}
                        <a onclick="getaudio()"><i class="layui-icon" style="font-size: 22px;cursor: pointer;">&#xe688;</i></a>
                        {/if}
                        <a href="javascript:getblack()"><i class="am-icon-ban am-icon-md" title="拖入黑名单"></i></a>
                        <a onclick="getswitch()"><i class="am-icon-md am-icon-random"></i></a>
                        <a onclick="gethistory()"><i class="am-icon-md am-icon-wpforms" title="该用户所有聊天记录"></i></a>
                        <a onmouseover="info()" id="paste" style="position:absolute; right:2px;top:5px;"><i class="am-icon-sm am-icon-cut"></i> 怎样发截图？</a>
                    </div>

                    <div class="tool_box">

                        <div class="wl_faces_content">

                            <div class="wl_faces_main">
                                <ul>
                                    <li><a href="javascript:;" >
                                        <img title="羊驼" src="/upload/emoji/emo_01.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="神马" src="/upload/emoji/emo_02.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="浮云" src="/upload/emoji/emo_03.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="给力" src="/upload/emoji/emo_04.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="围观" src="/upload/emoji/emo_05.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="威武" src="/upload/emoji/emo_06.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="熊猫" src="/upload/emoji/emo_07.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="兔子" src="/upload/emoji/emo_08.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="奥特曼" src="/upload/emoji/emo_09.gif"/></a></li>
                                    <li><a href="javascript:;">
                                        <img title="囧" src="/upload/emoji/emo_10.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="互粉" src="/upload/emoji/emo_11.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="礼物" src="/upload/emoji/emo_12.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="微笑" src="/upload/emoji/emo_13.gif"/></a></li>
                                    <li><a  href="javascript:;" >
                                        <img title="嘻嘻" src="/upload/emoji/emo_14.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="哈哈" src="/upload/emoji/emo_15.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="可爱" src="/upload/emoji/emo_16.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="可怜" src="/upload/emoji/emo_17.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="抠鼻" src="/upload/emoji/emo_18.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="吃惊" src="/upload/emoji/emo_19.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="害羞" src="/upload/emoji/emo_20.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="调皮" src="/upload/emoji/emo_21.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="闭嘴" src="/upload/emoji/emo_22.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="鄙视" src="/upload/emoji/emo_23.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="爱你" src="/upload/emoji/emo_24.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="流泪" src="/upload/emoji/emo_25.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="偷笑" src="/upload/emoji/emo_26.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="亲亲" src="/upload/emoji/emo_27.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="生病" src="/upload/emoji/emo_28.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="太开心" src="/upload/emoji/emo_29.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="白眼" src="/upload/emoji/emo_30.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="右哼哼" src="/upload/emoji/emo_31.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="左哼哼" src="/upload/emoji/emo_32.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="嘘" src="/upload/emoji/emo_33.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="衰" src="/upload/emoji/emo_34.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="委屈" src="/upload/emoji/emo_35.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="呕吐" src="/upload/emoji/emo_36.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="打哈欠" src="/upload/emoji/emo_37.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="抱抱" src="/upload/emoji/emo_38.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="怒" src="/upload/emoji/emo_39.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="问号" src="/upload/emoji/emo_40.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="馋" src="/upload/emoji/emo_41.gif"/></a></li>
                                    <li><a href="javascript:;"  >
                                        <img title="拜拜" src="/upload/emoji/emo_42.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="思考" src="/upload/emoji/emo_43.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="汗" src="/upload/emoji/emo_44.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="打呼" src="/upload/emoji/emo_45.gif"/></a></li>
                                    <li><a href="javascript:;">
                                        <img  title="睡" src="/upload/emoji/emo_46.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="钱" src="/upload/emoji/emo_47.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="失望" src="/upload/emoji/emo_48.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="酷" src="/upload/emoji/emo_49.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="好色" src="/upload/emoji/emo_50.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="生气" src="/upload/emoji/emo_51.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="鼓掌" src="/upload/emoji/emo_52.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="晕" src="/upload/emoji/emo_53.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="悲伤" src="/upload/emoji/emo_54.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="抓狂" src="/upload/emoji/emo_55.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="黑线" src="/upload/emoji/emo_56.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="阴险" src="/upload/emoji/emo_57.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="怒骂" src="/upload/emoji/emo_58.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="心" src="/upload/emoji/emo_59.gif"/></a></li>
                                    <li><a href="javascript:;" >
                                        <img title="伤心" src="/upload/emoji/emo_60.gif"/></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="msg-input">
                        <div class="input-box">
                            <textarea id="text_in" class="edit-ipt" style="overflow-y: auto; font-weight: normal; font-size: 14px; overflow-x: hidden; word-break: break-all; font-style: normal; outline: none;padding: 5px;border:none;height:150px;"
                                 contenteditable="true" hidefocus="true" tabindex="0"></textarea>
                        </div>
                    </div>
                </div>

                <!-- 浮层 -->
                <div id='fuceng' class="hide" style="background: #e2e2e2;width:270px;height: 80px;position: absolute;bottom: 60px;right: -270px;z-index: 9999;border-radius: 8px;">
                    <ul style="display: inline-block;width: 100%;height: 30px;line-height: 40px;text-align: center;">
                        <li onclick="choosetype(this)" style="cursor: pointer;" name='1'><i id='type1' class="layui-icon">&#xe605;</i><span>按Enter键发送消息，Ctrl+Enter换行</span></li>
                        <li onclick="choosetype(this)" style="cursor: pointer;" name='2'><i id='type2' class="layui-icon hidden">&#xe605;</i><span>按Ctrl+Enter键发送消息，Enter换行</span></li>
                    </ul>
                </div>

                <div class="msg-toolbar-footer grey12" style="bottom:63px;">
                    <a onclick="send()" class="layui-btn" style="background:#d41010;position: absolute;left:0;top:0;width: 80%;height: 42px;text-align: center;line-height: 46px;">
                        发送
                    </a>
                    <a id="showinfo" style="position: absolute;right: 0;top: 0;width: 20%;height: 42px;background: #d41010;text-align: center; border-left: 1px solid #FFF;cursor: pointer;" >
                        <i class='triangle'  style="margin-top: 21px;"></i>
                    </a>
                </div>

            </div>


        </section>

        <style>
          

            #quit_reply div{
                float: left;
                display: inline-block;
                height: 30px;
                background:#0e9e21;
                border-radius: 5px;
                padding:0 10px 0 10px;
                line-height: 32px;
                color: #fff;
                margin-right: 10px; 
                margin-bottom: 10px; 
                cursor: pointer; 
                position: relative;
            }

            .tag{
                
            }
            
             #quit_reply a{
                color: #fff;
                text-decoration : none;
             }

             .mysize{
               display:none;
             }
           

        </style>

        <section class="chatinfo">

            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin: 0px;">
                <ul class="layui-tab-title">
                    <li class="layui-this" style="width: 33%">访客信息</li>
                    <li style="width: 33%">黑名单</li>
                    <li style="width: 34%">快捷回复</li>
                </ul>

                <div class="layui-tab-content" >
                    <div class="layui-tab-item layui-show">
                        <div class="" style="margin:20px; ">

                            <div style="margin-top: 20px;font-size: 15px;">
                                <i class="am-icon-xs am-icon-bookmark" style="cursor: pointer;"
                                   title="访客浏览页面"></i>：<span class="record" ></span>
                            </div>
                            <div style="margin-top: 20px;font-size: 15px;">
                                <i class="am-icon-map-marker am-icon-xs"
                                   title="访客来源地址"></i>：<span class="iparea" ></span>
                            </div>

                            <div style="margin-top: 20px;font-size: 15px;">
                                <i class="am-icon-user-md am-icon-xs" title="访客状态">：<span
                                        id="v_state" ></span></i>
                            </div>

                          <!--   <div style="margin-top: 20px;position: relative;">
                               <span style="font-size: 18px;"><i class="am-icon-user am-icon-xs" title="访客名称"></i>：</span>
                               <input type="text" id="visiter_name" class="layui-input" style="position: absolute;right:0;top:0;width: 90%;height: 30px;" onblur="saveinfo()" />
                            </div>

                             <div style="margin-top: 20px;position: relative;">
                               <span style="font-size: 18px;"><i class="am-icon-phone am-icon-xs" title="访客联系方式"></i>：</span>
                                <textarea  id="connect" class="layui-input" style="position: absolute;right:0;top:0;width: 90%;height: 60px;" onblur="saveinfo()"></textarea>
                            </div>
-->
                             <div style="margin-top: 20px;position: relative;">
                               <span style="font-size: 14px;"><i class="am-icon-comment am-icon-xs" title="访客备注"></i>：</span>
                               <textarea  id="comment" placeholder="这里填写备注信息，填写后自动保存" class="layui-input" style="position: absolute;right:0;top:0;width: 90%;height: 60px;padding:8px;font-size:14px" onblur="saveinfo()"></textarea>
                            </div>

                        </div>

                    </div>

                    <div class="layui-tab-item" id='black_list' style="width: 100%;height:400px;overflow-y: auto;padding: 0px;">
                    </div>

                    <div class="layui-tab-item" id='word_list' style="width: 100%;height: 500px; overflow-y: auto;">
                        <div id='quit_reply' >
                         
                                            
                        </div>

                       
                    </div>

                </div>
            </div>

        </section>

    </div>

</div>

<script type="text/javascript">

    function saveinfo(){
        var data = $.cookie("cu_com");
        var jsondata = $.parseJSON(data);
        var name=$("#visiter_name").val();
        var connects=$('#connect').val();
        var comments=$("#comment").val();

        $.ajax({
          url:'/admin/manager/saveVisiter',
          type:'post',
          data:{comment:comments,visiter_id:jsondata.visiter_id},
          success:function(res){
            if(res.code == 0){
                getchat();
            }
          }
        });
        
    }


    function show(obj){
        
        $(obj).find('i').removeClass("mysize");
    }

    function hide(obj){
        $(obj).find('i').addClass("mysize");
    }

    function addreply(){
      
      var html='<form class="layui-form" style="margin-top:30px;">';
          html+='<div class="layui-form-item"><label class="layui-form-label">标签：</label>';
          html+='<div class="layui-input-block"><input id="tag" type="text" class="layui-input" style="width:260px" /></div></div>';
          html+='<div class="layui-form-item layui-form-text"><label class="layui-form-label">快捷用语：</label>';
          html+='<div class="layui-input-block"><textarea id="word" name="content" class="layui-textarea" style="width:260px" ></textarea></div></div>'
          html+='</form>';

        layer.open({
            type:1,
            title:'添加快捷语句',
            area: ['400px', '300px'],
            content: html,
            btn: ['确定', '取消'],
            yes:function(res){
                  $.ajax({
                    url: "/admin/manager/addword",
                    type: "post",
                    data: {word: $("#word").val(),tag:$("#tag").val()},
                    success: function (res) {
                        if (res.code ==0) {
                            layer.msg(res.msg, {icon: 1,time:2000,end:function () {
                                getreply();
                                layer.closeAll();
                            }});
                        }
                    }
                });
            }
           
        });
    }

    function close(id){
        $.ajax({
            url:'/admin/manager/delreply',
            type:'post',
            data:{id:id},
            success:function(res){
                if(res.code ==0){
                    layer.msg(res.msg,{icon:1,end:function(){
                        
                         $("#reply"+id).remove();
                    }});
                }
            }
        })
    }


    function showon(str){
      
      $("#text_in").val(str);

    }



    function getOs() {
        var OsObject = "";

        if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
            return "Firefox";
        }
    }

 function showDiv(){
       
       $("#fuceng").toggleClass('hide');
    }


    $(function (){

    $("#showinfo").on('click',function(event){

        showDiv();

        $(document).one("click", function () {
        
         $("#fuceng").addClass('hide');

        }); 
        event.stopPropagation();//阻止事件向上冒泡
    });

   $("#fuceng").click(function (event) 
    {
        event.stopPropagation();//阻止事件向上冒泡
        
    });
 });
   


   

    function choosetype(obj){

        $(obj).children('i').removeClass('hidden');
        $(obj).siblings('li').children('i').addClass('hidden'); 
        var type =$(obj).attr('name');
        $.cookie('type',type);
        $("#fuceng").addClass('hide');

        types();
    }


    //获取qq截图的图片
    (function () {
        var imgReader = function (item) {
            var sdata = $.cookie('cu_com');
            if (sdata) {
                var json = $.parseJSON(sdata);
                var img = json.avater;
            }

            var sid = $('#channel').text();
            var se = $("#chatmsg_submit").attr('name');
            var customer = $("#customer").text();
            var pic = $("#se_avatar").attr('src');
            var time;

            var blob = item.getAsFile(),
                reader = new FileReader();
            var formData = new FormData();
            var name = encodeURIComponent('img-' + new Date().getTime() + '.png');
            formData.append('upload', blob, name);
            $.ajax({
                url:'/admin/set/upload',
                type: 'POST',
                data: formData,
                //这两个设置项必填
                contentType: false,
                processData: false,
                success:function(res){
                    if (res.code == 0) {
                        var content = '![]('+res.data+')';
                        $.ajax({
                            url:'/admin/set/chats',
                            type:'post',
                            data: {
                                visiter_id:sid,content: content, avatar: img
                            },
                            success:function(res){}
                        });
                    }
                }
            });
            // 读取文件后将其显示在网页中
            reader.onload = function (e) {
                var msg = '';
                msg += "<img onclick='getbig(this)'  src='" + e.target.result + "'>";

                    if($.cookie("time") == ""){
                        var myDate = new Date();
                            time = myDate.getHours()+":"+myDate.getMinutes();
                        var timestamp = Date.parse(new Date());
                        $.cookie("time",timestamp/1000);

                    }else{

                        var timestamp = Date.parse(new Date());

                        var lasttime =$.cookie("time");
                        if((timestamp/1000 - lasttime) >30){
                            var myDate =new Date(timestamp);
                            time = myDate.getHours()+":"+myDate.getMinutes();
                        }else{
                            time ="";
                        }

                        $.cookie("time",timestamp/1000);

                    }
                
                    var str = '';
                    str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                    str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle se_pic" src="' + pic + '" width="50px" height="50px"></div>';
                    str += "<div class='outer-right no_border'><div class='service'>";
                    str += "<pre>" + msg + "</pre>";
                    str += "</div></div>";
                    str += "</li>";

                    $(".conversation").append(str);
                    $("#text_in").empty();

                    var div = document.getElementById("wrap");
                    div.scrollTop = div.scrollHeight;

            };
            // 读取文件
            reader.readAsDataURL(blob);
        };
        document.getElementById('text_in').addEventListener('paste', function (e) {
            // 添加到事件对象中的访问系统剪贴板的接口
            var clipboardData = e.clipboardData,
                i = 0,
                items, item, types;

            if (clipboardData) {
                items = clipboardData.items;
                if (!items) {
                    return;
                }
                item = items[0];
                // 保存在剪贴板中的数据类型
                types = clipboardData.types || [];
                for (; i < types.length; i++) {
                    if (types[i] === 'Files') {
                        item = items[i];
                        break;
                    }
                }
                // 判断是否为图片数据
                if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
                    imgReader(item);
                }
            }
        });
    })();

  
    // 视频通话
    var getvideo =function(){

        var sid = $('#channel').text();

        window.open("https://v.zyllaw.hk:9988/room.php?cid=" + sid);

        $("#text_in").val("https://v.zyllaw.hk:9988/room.php?cid=" + sid);

        send();

//        var pic = $("#se_avatar").attr('src');
//
//        var times = (new Date()).valueOf();
//        var se = $("#se").text();
//        //申请
//        $.ajax({
//            url: '/admin/set/apply',
//            type: 'post',
//            data: {id: sid,channel: times,avatar:pic,name:se},
//            success:function(res){
//                if(res.code !=0){
//                    layer.msg(res.msg,{icon:2,offset:'20px'});
//                }else{
//
//                    var str='';
//                    str+='<div class="videos">';
//                    str+='<video id="localVideo" autoplay></video>';
//                    str+='<video id="remoteVideo" autoplay class="hidden"></video></div>';
//
//
//                      layer.open({
//                          type:1
//                          ,title: '视频'
//                          ,shade:0
//                          ,closeBtn:1
//                          ,area: ['440px', '378px']
//                          ,content:str
//                          ,end:function(){
//
//
//                             mediaStreamTrack.getTracks().forEach(function (track) {
//                                track.stop();
//                            });
//
//                          }
//                    });
//
//
//                     try{
//                         connenctVide(times);
//                     }catch(e){
//                         console.log(e);
//                         return;
//                     }
//
//                }
//            }
//
//        });
        
      
    }




    //
    var gethistory=function(){

       var sdata = $.cookie("cu_com");
       var jsondata = $.parseJSON(sdata);
       var vid =jsondata.visiter_id;
        layer.open({
            type: 2,
            title: '该用户所有历史消息',
            area: ['600px', '500px'],
            shade: false,
            content: '/admin/index/history?visiter_id='+vid
        });

    }

    var recorder = '';

    var getaudio =function(){

        //音频先加载
        var audio_context;
        var recorder;
        var wavBlob;
        //创建音频
        try {
            // webkit shim
            window.AudioContext = window.AudioContext || window.webkitAudioContext;
            window.URL = window.URL || window.webkitURL;
            audio_context = new AudioContext;

            if (!navigator.mediaDevices) {
                layui.layer.msg('语音创建失败');
            }
        } catch (e) {
            show_user_media_error(e);
            return;
        }
        navigator.mediaDevices.getUserMedia({audio: true}).then(function (stream) {
            var input = audio_context.createMediaStreamSource(stream);
            recorder = new Recorder(input);

            var falg = window.location.protocol;
            if (falg == 'https:') {
                recorder && recorder.record();

                //示范一个公告层
                layui.use(['jquery', 'layer'], function () {
                    var layer = layui.layer;

                    layer.msg('录音中...', {
                        icon: 16
                        , shade: 0.01
                        , skin: 'layui-layer-lan'
                        , time: 0 //20s后自动关闭
                        , btn: ['发送', '取消']
                        , yes: function (index, layero) {
                            //按钮【按钮一】的回调
                            recorder && recorder.stop();
                            recorder && recorder.exportWAV(function (blob) {
                                wavBlob = blob;
                                var fd = new FormData();
                                var wavName = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav');
                                fd.append('wavName', wavName);
                                fd.append('file', wavBlob);

                                var xhr = new XMLHttpRequest();
                                xhr.onreadystatechange = function () {
                                    if (xhr.readyState == 4 && xhr.status == 200) {
                                        jsonObject = JSON.parse(xhr.responseText);

                                        voicemessage = '<div style="cursor:pointer;text-align:center;" onclick="getstate(this)" data="play"><audio src="'+jsonObject.data.src+'"></audio><i class="layui-icon" style="font-size:25px;">&#xe652;</i><p>音频消息</p></div>';
                                        var content = 'voice('+jsonObject.data.src+')';

                                        var sid = $('#channel').text();
                                        var pic = typeof imghead != 'undefined' && imghead ? imghead : $("#se_avatar").attr('src');
                                        var time;

                                        var sdata = $.cookie('cu_com');

                                        if (sdata) {
                                            var json = $.parseJSON(sdata);
                                            var img = json.avater;

                                        }

                                        if($.cookie("time") == ""){
                                            var myDate = new Date();
                                            time = myDate.getHours()+":"+myDate.getMinutes();
                                            var timestamp = Date.parse(new Date());
                                            $.cookie("time",timestamp/1000);

                                        }else{

                                            var timestamp = Date.parse(new Date());

                                            var lasttime =$.cookie("time");
                                            if((timestamp/1000 - lasttime) >30){
                                                var myDate =new Date(timestamp*1000);
                                                time = myDate.getHours()+":"+myDate.getMinutes();
                                            }else{
                                                time ="";
                                            }

                                            $.cookie("time",timestamp/1000);
                                        }

                                        var str = '';
                                        str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                                        str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle se_pic" src="' + pic + '" width="50px" height="50px"></div>';
                                        str += "<div class='outer-right'><div class='service'>";
                                        str += "<pre>" +  voicemessage + "</pre>";
                                        str += "</div></div>";
                                        str += "</li>";

                                        $(".conversation").append(str);
                                        $("#text_in").empty();

                                        var div = document.getElementById("wrap");
                                        div.scrollTop = div.scrollHeight;

                                        $.ajax({
                                            url: "/admin/set/chats",
                                            type: "post",
                                            data: {visiter_id: sid || visiter_id,content:  content, avatar: img}
                                        });
                                    }
                                };
                                xhr.open('POST', '/admin/event/uploadVoice');
                                xhr.send(fd);
                            });
                            recorder.clear();
                            layer.close(index);
                        }
                        , btn2: function (index, layero) {
                            //按钮【按钮二】的回调
                            recorder && recorder.stop();
                            recorder.clear();
                            audio_context.close();
                            layer.close(index);
                        }
                    });

                });
            } else {
                layer.msg('音频输入只支持https协议！');
            }
        }).catch(function (e) {
            show_user_media_error(e);
        });
    };

    var getstate = function (obj) {

        var c = obj.children[0];

        var type = 'mp3';
        var url = $(c).attr('src');
        if (/\.amr$/.test(url)) {
            type = 'amr';
            if (!obj.c) {
                obj.c = new BenzAMRRecorder();
                obj.c.initWithUrl(url).then(function () {
                    getstate(obj);
                });
                obj.c.onEnded(function () {
                    $(obj).attr('data', 'play');
                    $(obj).find('i').html("&#xe652;");
                });
                return;
            } else {
                c = obj.c;
            }
        }

        var state = $(obj).attr('data');

        if (state == 'play') {
            c.play();
            $(obj).attr('data', 'pause');
            $(obj).find('i').html("&#xe651;");

        } else if (state == 'pause') {
            c.pause();
            $(obj).attr('data', 'play');
            $(obj).find('i').html("&#xe652;");
        }

        if (type != 'amr') {
            c.addEventListener('ended', function () {
                $(obj).attr('data', 'play');
                $(obj).find('i').html("&#xe652;");
            }, false);
        }
    };

    var getswitch = function () {

        var sdata = $.cookie("cu_com");
        var jsondata = $.parseJSON(sdata);
        var sid = jsondata.visiter_id;

        var se = $("#se").text();

        layer.open({
            type: 2,
            title: '客服列表',
            area: ['300px', '400px'],
            shade: false,
            content: '/admin/index/service?visiter_id=' + sid + '&name=' + se
        });
    };

    function search_by_name(keyword) {
        reset_search();
        $.each($('#chat_list .visiter'), function(k, v){
            var name = $(v).find(".c_name").text();
            if(name.indexOf(keyword)==-1) {
                $(v).css('display','none');
            }
        });
    }

    function reset_search() {
        $.each($('#chat_list .visiter'), function(k, v){
            $(v).css('display','block');
        });
    }

    (function () {
        var hm = document.createElement("script");
        hm.src = "/assets/libs/webrtc/recorder.js";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();

    (function () {
        var hm = document.createElement("script");
        hm.src = "/assets/libs/audio/BenzAMRRecorder.js";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();

</script>
<script type="text/javascript" src="__script__/admin/chat.js?v=5.1.3"></script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp w_back_bg" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe.
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides.
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<!-- Core CSS file -->
<link rel="stylesheet" href="/assets/libs/photoswipe/photoswipe.css">

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite,
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="/assets/libs/photoswipe/default-skin.css">

<!-- Core JS file -->
<script src="/assets/libs/photoswipe/photoswipe.min.js"></script>

<!-- UI JS file -->
<script src="/assets/libs/photoswipe/photoswipe-ui-default.min.js"></script>


{include file="public/footer"/}

